<template>
    <div class="public_main_style">
        <div class="public_main_head">
            <el-form :model="filters" inline label-width="100px" @submit.native.prevent>
                <el-row type="flex" align="middle">
                    <el-col :span="8">
                        <el-form-item label="用户Id:">
                            <el-input
                                    size="small"
                                    v-model="filters.userId"
                                    placeholder="请输入用户Id"
                                    clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="反馈类型:">
                            <el-select
                                    style="width:100%"
                                    size="small"
                                    clearable
                                    v-model="filters.feedbackType"
                                    placeholder="请选择反馈类型">
                                <el-option
                                        v-for="dict in dictArrs.feedback_type"
                                        :key="dict.dictId"
                                        :label="dict.label"
                                        :value="dict.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态:">
                            <el-select
                                    style="width:100%"
                                    size="small"
                                    clearable
                                    v-model="filters.status"
                                    placeholder="请选择状态">
                                <el-option label="已回复" value="0"/>
                                <el-option label="未回复" value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle" justify="center">
                    <el-col :span="3">
                        <el-form-item>
                            <el-button
                                    style="width:100%;"
                                    type="primary"
                                    size="small"
                                    @click="updataTableList(1)"
                                    icon="el-icon-search"
                            >搜索
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- ETable -->
        <ETable ref="table" :columns="tableHead" :getData="getTableData" @selectionChage="onSelectTableRow">
            <template slot="status" slot-scope="{ row }">
                <el-tag
                        size="small"
                        :type="row.status == '1' ? 'danger' : 'primary'"
                >{{ row.status =='1'?'未回复':'已回复' }}
                </el-tag>
            </template>
            <template slot="feedbackType" slot-scope="{row}">
                <span> {{ $getDict(dictArrs.feedback_type, row.feedbackType) }}</span>
            </template>
            <template slot="handle" slot-scope="{ row }">
                <el-button
                        size="mini"
                        type="primary"
                        v-if="row.status=='1'"
                        @click="onSwitchStatus(row)">回复
                </el-button>
            </template>
        </ETable>
        <!-- 修改用户弹框 -->
        <feedbackModal ref="feedbackModal" :feedbackId="feedbackId" @refresh = "updataTableList"/>
    </div>
</template>

<script>
    import vueState from '@lib/vuexState'
    import http from "../../http/config";
    import feedbackModal from './components/feedbackModal'

    export default {
        name: "index.vue",
        mixins: [vueState],
        data() {
            return {
                filters: {
                    userId: '',
                    feedbackType: '',
                    status: ''
                },
                tableHead: [
                    {
                        type: 'selection'
                    },
                    {
                        prop: 'feedbackId',
                        label: '反馈id',
                    },
                    {
                        prop: 'userId',
                        label: '用户Id',
                    },
                    {
                        prop: 'feedbackType',
                        label: '反馈类型',
                        slotName: 'feedbackType'
                    },
                    {
                        prop: 'url_list',
                        label: '图片数组',
                    },
                    {
                        prop: 'content',
                        label: '反馈内容',
                    },
                    {
                        prop: 'replyContent',
                        label: '反馈回复',
                    },
                    {
                        prop: 'createTime',
                        label: '创建时间',
                    },
                    {
                        prop: 'replyTime',
                        label: '回复时间',
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        slotName: 'status',
                    },
                    {
                        label: '操作',
                        slotName: 'handle'
                    }
                ],
                feedbackId: ''
            }
        },
        created() {
            this.$store.dispatch('getDictlists', 'feedback_type')
        },
        methods: {
            //获取列表数据
            async getTableData(arg) {
                return (await http.post('/cms/auth/user/feedback/listUserFeedback', {...arg, ...this.filters}))
            },
            // 选择表格数据
            onSelectTableRow(row) {
                this.selectTableRow = row
            },
            //更新列表数据
            updataTableList(pageIndex) {
                this.$refs.table.updateTable(pageIndex)
            },
            //启用/禁用项目
            onSwitchStatus(row) {
                this.feedbackId = row.feedbackId
                this.$refs['feedbackModal'].showModal = true
            },
            // 操作表格行数据
            onShowModal(type) {
                if (this.selectTableRow.length == 1) {
                    this.feedbackId = this.selectTableRow[0].feedbackId
                    this.$refs[type].showModal = true
                } else {
                    this.feedbackId = ''
                    this.$message.error('请选择一行数据进行操作!')
                }
            },
        },
        components: {
            feedbackModal
        }
    }
</script>

<style scoped>

</style>
